<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Zoomla逐浪CMS z01.com">
<title>简介 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with the Bootstrap CDN and a template starter page.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with the Bootstrap CDN and a template starter page.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
      
      
    </ul>
  </div>
 
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>
<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      
      <nav class="collapse bd-links" id="bd-docs-nav">
        <div class="bd-toc-item active"> <a class="bd-toc-link" href="index.html">快速入门</a>
          <ul class="nav bd-sidenav">
            <li class="active bd-sidenav-active"><a href="index.html">关于</a></li>
            <li><a href="download.html">下载</a></li>
            <li><a href="contents.html">目录结构</a></li>
            <li><a href="browsers-devices.html">浏览器与设备调优</a></li>
            <li><a href="javascript.html">JavaScript脚本</a></li>
            <li><a href="theming.html">主题化</a></li>
            <li><a href="build-tools.html">编译工具</a></li>
            <li><a href="webpack.html"> Webpack模块化</a></li>
            <li><a href="accessibility.html">无障碍浏览</a></li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../layout/overview.html">布局</a>
          <ul class="nav bd-sidenav">
            <li><a href="../layout/overview.html">概览</a></li>
            <li><a href="../layout/grid.html">栅格</a></li>
            <li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../content/reboot.html">内容 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../content/reboot.html"> 初始化与CSS重置 </a> </li>
            <li> <a href="../content/typography.html"> 排版 </a> </li>
            <li> <a href="../content/code.html"> 代码 </a> </li>
            <li> <a href="../content/images.html"> 图片 </a> </li>
            <li> <a href="../content/tables.html"> 表格 </a> </li>
            <li> <a href="../content/figures.html"> 图文框 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../components/alerts.html"> 组件 </a>
          <ul class="nav bd-sidenav">
    <li><a href="../components/alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="../components/badge.html"> 徽章(Badge) </a> </li>
    <li><a href="../components/breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="../components/buttons.html"> 按钮(Button) </a> </li>
    <li><a href="../components/button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="../components/card.html"> 卡片(Card) </a> </li>
    <li><a href="../components/carousel.html">  轮播效果(Carousell) </a> </li>
    <li><a href="../components/collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="../components/dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="../components/forms.html"> 表单(Form) </a> </li>
    <li><a href="../components/input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="../components/jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="../components/list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="../components/media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="../components/modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="../components/navs.html"> 导航/滑动门(Nav) </a> </li>
    <li><a href="../components/navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="../components/pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="../components/popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="../components/progress.html"> 进度条(Progress) </a> </li>
    <li><a href="../components/scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="../components/spinners.html"> 旋转特效(Spinners) </a> </li>
    <li><a href="../components/toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li><a href="../components/tooltips.html"> 提示冒泡(Tooltip) </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../utilities/borders.html"> 边框(border) </a> </li>
            <li> <a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
            <li> <a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
            <li> <a href="../utilities/colors.html"> 颜色(color) </a> </li>
            <li> <a href="../utilities/display.html"> Display显示属性 </a> </li>
            <li> <a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
            <li> <a href="../utilities/flex.html"> Flex弹性布局 </a> </li>
            <li> <a href="../utilities/float.html"> Float浮动属性 </a> </li>
            <li> <a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
			<li><a href="../utilities/overflow.html"> 溢出 </a> </li>
            <li> <a href="../utilities/position.html"> 固顶(底）及定位 </a> </li>
            <li> <a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders) </a> </li>
			<li><a href="../utilities/shadows.html"> 阴影(shadows) </a> </li>
            <li> <a href="../utilities/sizing.html"> 规格(sizi) </a> </li>
            <li> <a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
            <li> <a href="../utilities/text.html"> 文本处理 </a> </li>
            <li> <a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
            <li> <a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../extend/approach.html"> 延伸 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../extend/approach.html"> 方法论 </a> </li>
            <li> <a href="../extend/icons.html"> 图标 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../migration/index.html"> 迁移 </a>
          <ul class="nav bd-sidenav">
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../about/history.html"> 关于 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../about/history.html"> 成长历史 </a> </li>
            <li> <a href="../about/team.html"> 项目团队 </a> </li>
            <li> <a href="../about/brand.html"> 品牌标志 </a> </li>
            <li> <a href="../about/license.html"> 许可授权 </a> </li>
            <li> <a href="../about/translations.html"> 翻译 </a> </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="d-none d-xl-block col-xl-2 bd-toc">
      <ul class="section-nav">
        <li class="toc-entry toc-h2"><a href="#quick-start">快速部署</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#css">CSS</a></li>
            <li class="toc-entry toc-h3"><a href="#js">JS</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h2"><a href="#starter-template">Hello, World!模板</a></li>
        <li class="toc-entry toc-h2"><a href="#important-globals">全局规范</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#html5-doctype">HTML5 doctype 头部规范</a></li>
            <li class="toc-entry toc-h3"><a href="#responsive-meta-tag">响应式meta标签</a></li>
            <li class="toc-entry toc-h3"><a href="#box-sizing">盒尺寸</a></li>
            <li class="toc-entry toc-h3"><a href="#reboot">初始化与CSS重置</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h2"><a href="#community">社区支持</a></li>
      </ul>
    </div>
    <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
      <h1 class="bd-title" id="content">关于Bootstrap</h1>
      <p class="bd-lead">Bootstrap是世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。</p>
       
      <h2 id="quick-start">快速部署</h2>
      <p>使用 Bootstrap CDN嵌入4行代码就能完成导入！ <a href="download.html">点此这里下载离线包及源码</a>。</p>
	  
      <h3 id="css">1行 CSS</h3>
      <p>复制下面的 <code class="highlighter-rouge">&lt;link&gt;</code> 样式表粘贴到网页 <code class="highlighter-rouge">&lt;head&gt;</code> 里面，并放在其它CSS文件之前.</p>
	<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span></code></pre>
	</figure>
      <h3 id="js">3行 JS</h3>
      <p>全局组件运行在 <a href="https://jquery.com">jQuery</a> 组件上，其中包括 <a href="https://popper.js.org/">Popper.js</a>, 以及系统内置 JavaScript 插件. 建议将 <code class="highlighter-rouge">&lt;script&gt;</code> 的结束放在页面的 <code class="highlighter-rouge">&lt;/body&gt;</code> 之前以符合新移动WEB规范，并遵循下面代码的先后顺序。</p>
      <p>您可以引用 <a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">jQuery 精简版</a>,兼容完整版，并无二异。</p>
	 <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.3.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
      <p>这里列出了需要JQuery、Bootstrap.js、Popper.js组件清单，如果你不熟悉组件可以继续查看本文档的其它部份的示例源码。</p>
      <details>
        <summary class="text-primary mb-3">查看需要JavsScript的组件</summary>
        <ul>
          <li>组件提示</li>
          <li>按钮点击状态、勾(复)选框</li>
          <li>幻灯片、指标器</li>
          <li>折叠面板控制内容是否显示</li>
          <li>下拉菜单、显示定位事件(主要<a href="https://popper.js.org/">Popper.js</a>)</li>
          <li>显示模态和浏览器侦听</li>
          <li>导航条以及响应式适配</li>
          <li>工具提示和移动事件 (主要 <a href="https://popper.js.org/">Popper.js</a>)</li>
          <li>滚动侦听和导航事件</li>
        </ul>
      </details>
      <h2 id="starter-template">Hello, World!模板</h2>
      <p>使用H5标准构建一个最精简的模板，推荐规范如下（其中第2行在英文站点中使用<code class="language-html" data-lang="html"><span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span></code>）替换:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!doctype html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="c">&lt;!-- Required meta tags --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">&gt;</span><font></font>
<font></font>
    <span class="c">&lt;!-- Bootstrap CSS --&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span><font></font>
<font></font>
    <span class="nt">&lt;title&gt;</span>Hello, world!<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span><font></font>
<font></font>
    <span class="c">&lt;!-- Optional JavaScript --&gt;</span>
    <span class="c">&lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.3.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre></figure>
      <p>拷贝上面代码，然后按照本文档的 <a href="../layout/overview.html"> 布局 </a> 、 <a href="https://code.z01.com/docs/4.0/examples/"> 示例</a> 来构建你的组件和内容.</p>
      <h2 id="important-globals">全局规范</h2>
      <p>Bootstrap 推荐全局样式和设置统一，使之标准化，这些样式设置（比如root设置-译者注）会影响全局，支持跨浏览器和标准化，让我们来学习它</p>
      <h3 id="html5-doctype">HTML5 doctype头部规范</h3>
      <p>HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真（中国码农往往直接抄国外站点将lang写成en-正确中文站点应该用zh-CN，这些小细节也要注意，以免贻笑大方-译者注)。</p>
      <figure class="highlight">
        <pre><code class="language-html" data-lang="html"><span class="cp">&lt;!doctype html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"zh-cn"</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;/html&gt;</span></code></pre>
      </figure>
      <h3 id="responsive-meta-tag">响应式meta标签</h3>
      <p><em>移动设备优先</em>, Bootstrap 4 不同于历史版本，它首先为移动设备优化代码，然后用CSS媒体查询来扩展组件。为了确保所有的设备的渲染和触摸效果，必须在网页的<code class="highlighter-rouge">&lt;head&gt;</code>区添加响应式的视图标签，简要的说就是优先引入下面一行。</p>
      <figure class="highlight">
        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">&gt;</span></code></pre>
      </figure>
      <p> <a href="#starter-template">Hello, World!模板</a>中作了明确的示例。</p>
      <h3 id="box-sizing">盒尺寸</h3>
      <p>为了更直观地用BootStrap的尺寸规范(而不受各浏览标准影响)，我们把将全局<code class="highlighter-rouge">box-sizing</code>的值由默认的<code class="highlighter-rouge">content-box</code>重定义为<code class="highlighter-rouge">border-box</code>，以保证<code class="highlighter-rouge">padding</code>不会影响元素的最后计算宽度。但在页面引用Google自定义搜索、Google Map地图等第三方产品时会出现兼容性问题。</p>
      <p>对此你可以使用下面的方法来重置盒尺寸:</p>
      <figure class="highlight">
        <pre><code class="language-scss" data-lang="scss"><span class="nc">.selector-for-some-widget</span> <span class="p">{</span>
<span class="nl">box-sizing</span><span class="p">:</span> <span class="n">content-box</span><span class="p">;</span>
<span class="p">}</span></code></pre>
      </figure>
      <p>用了上面方法重定义后，所有嵌套在内的元素-包括通过<code class="highlighter-rouge">:before</code>以及<code class="highlighter-rouge">:after</code>产生的内容，都会继承<code class="highlighter-rouge">.selector-for-some-widget</code>所指定的<code class="highlighter-rouge">box-sizing。</code></p>
      <p><a href="https://css-tricks.com/box-sizing/" target="_blank">box model and sizing 盒框型技巧扩展学习</a>.</p>
      <h3 id="reboot">初始化与CSS重置</h3>
      <p>为了解决跨浏览器的渲染差异, BootStrap使用了 <a href="../content/reboot.html">初始化与CSS重置</a> 对常用CSS组件进行了重新初始化，以更正浏览器和设备之间的各种厂商私有定义的缺陷。</p>
      <h2 id="community">社区支持</h2>
      <p>这是一些官方推荐的社区支持(境外站点可能会出现无法访问）。</p>
      <ul>
        <li>Follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a>.</li>
        <li>Read and subscribe to <a href="https://blog.getbootstrap.com">The Official Bootstrap Blog</a>.</li>
        <li>Join <a href="https://bootstrap-slack.herokuapp.com">the official Slack room</a>.</li>
        <li>Chat with fellow Bootstrappers in IRC. On the <code class="highlighter-rouge">irc.freenode.net</code> server, in the <code class="highlighter-rouge">##bootstrap</code> channel.</li>
        <li>Implementation help may be found at Stack Overflow (tagged <a href="https://stackoverflow.com/questions/tagged/bootstrap-4"><code class="highlighter-rouge">bootstrap-4</code></a>).</li>
        <li>Developers should use the keyword <code class="highlighter-rouge">bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/browse/keyword/bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
        
      </ul>
      <p>官方推特关注 <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a>.</p>
    </main>
  </div>
</div>

<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
	inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 

</body>
</html>